var React = require('react');
var AppView = require('../../common/component/view/app-view.node');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');

module.exports = <>
  <AppView viewTitle="${t('ui.infrastructure.profileDetail.title.profileDetail')}">
    <link href="${appCss('static/app/infrastructure/profile/profile-detail.css')}" rel="stylesheet" />

    <div className="x-search-bar">
    </div>

    <div className="x-tool-bar">
    </div>

    <div>
      <span data-x-name="data.profileItemCode" className="h6"></span>
      <span>-</span>
      <span data-x-name="data.profileItemName" className="h6"></span>
      <span>&nbsp;</span>
      <span data-x-name="data.profileItemDesc"></span>
    </div>

    <table data-x-ui="profileSettingTable" className="x-table-custom"
      data-x-name="data.profileSettings" data-x-type="dataGrid">
      <thead>
        <tr>
          <th data-field="id" data-visible="false">ID</th>
          <th data-field="levelTypeDesc">{"${t('ui.infrastructure.profileDetail.field.levelType')}"}</th>
          <th data-field="valueCode">{"${t('ui.infrastructure.profileDetail.field.valueCode')}"}</th>
          <th data-field="remark">{"${t('ui.infrastructure.profileDetail.field.remark')}"}</th>
          <th data-field="enableFlagDesc">{"${t('ui.system.common.field.enableFlag')}"}</th>
          <th>{"${t('ui.system.common.field.operate')}"}</th>
        </tr>
      </thead>
    </table>

    {/* "编辑值项"弹出框 */}
    <div data-x-ui="editProfileSettingDialog" className="modal" tabIndex="-1">
      <ModalDialog dialogTitle="${t('ui.infrastructure.profileDetail.dialog.editProfileSetting')}">
        <ModalBody>
          <form>
            <input type="hidden" id="id" name="id" data-x-name="edit.levelType" />

            <div className="form-group">
              <label htmlFor="levelTypeDesc">{"${t('ui.infrastructure.profileDetail.field.levelType')}"}</label>
              <input type="text" className="form-control" id="levelTypeDesc" name="levelTypeDesc" data-x-name="edit.levelTypeDesc" readOnly={true} />
            </div>
            <div className="form-group">
              <label htmlFor="valueCode">{"${t('ui.infrastructure.profileDetail.field.valueCode')}"}</label>
              <input type="text" className="form-control" id="valueCode" name="valueCode" data-x-name="edit.valueCode"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 100)}"} />
            </div>
            <div className="form-group">
              <label htmlFor="remark">{"${t('ui.infrastructure.profileDetail.field.remark')}"}</label>
              <input type="text" className="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}"} />
            </div>
            <div className="form-group">
              <label htmlFor="enableFlag">{"${t('ui.system.common.field.enableFlag')}"}</label>
              <select className="form-control" id="enableFlag" name="enableFlag" data-x-name="edit.enableFlag"
                defaultValue="true">
                <option value="true">{"${t('ui.system.common.option.enableFlag.true')}"}</option>
                <option value="false">{"${t('ui.system.common.option.enableFlag.false')}"}</option>
              </select>
            </div>
          </form>
        </ModalBody>
        <ModalFooter confirmLabel="${t('ui.system.common.btn.save')}" cancelLabel="${t('ui.system.common.btn.cancel')}" />
      </ModalDialog>
    </div>

    <div className="x-footer-bar">
      <button data-x-ui="backBtn" type="button" className="btn btn-secondary">{"${t('ui.system.common.btn.back')}"}</button>
    </div>

    <script src="${appJs('app/infrastructure/profile/profile-detail.js')}" type="text/javascript"></script>
  </AppView>
</>
